<template>
  <el-card class="dashboard-court-schedule">
    <template #header>
      <div class="card-header">
        <span class="title">案件开庭时间表</span>
        <el-button type="text" size="small" class="more-btn" @click="handleMore">更多</el-button>
      </div>
    </template>

    <el-empty v-if="courtScheduleList.length === 0 && !loading" description="暂无开庭案件" />

    <el-table
      v-else
      v-loading="loading"
      :data="courtScheduleList"
      size="small"
      border
      style="width: 100%"
      stripe
    >
      <el-table-column prop="case_code" label="案件编号" min-width="140" show-overflow-tooltip>
        <template #default="{ row }">
          <span class="case-code">{{ row.case_code }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="main_lawyer_name"
        label="代理律师"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="client_info"
        label="委托当事人"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        prop="opponent_info"
        label="对方当事人"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column prop="court_name" label="开庭法院" min-width="120" show-overflow-tooltip />
      <el-table-column prop="session_time" label="开庭时间" min-width="160" show-overflow-tooltip>
        <template #default="{ row }">
          <span :class="getTimeClass(row.session_time)">{{ row.session_time }}</span>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
  import { ref, onMounted, defineExpose } from 'vue'
  import { ElMessage } from 'element-plus'
  import type { LawCase } from '@/types/lawcase'
  import { lawcaseApi } from '@/api/lawcase'

  // 响应式状态变量
  const loading = ref(false)
  const courtScheduleList = ref<LawCase[]>([])
  const hasBeenLoaded = ref(false) // 标记数据是否已经加载过

  // 加载开庭案件列表 - 简洁的防重复请求机制
  const loadCourtScheduleList = async () => {
    // 防重复检查
    if (hasBeenLoaded.value || loading.value) {
      return
    }

    // 设置加载状态
    loading.value = true

    try {
      // 调用API获取开庭案件列表
      const response = await lawcaseApi.getCourtScheduleList()

      if (response.code === 0 && response.data) {
        // 按开庭时间排序
        const sortedData = response.data.sort((a: LawCase, b: LawCase) => {
          return new Date(a.session_time).getTime() - new Date(b.session_time).getTime()
        })
        courtScheduleList.value = sortedData

        // 设置已加载标记
        hasBeenLoaded.value = true
      } else {
        ElMessage.error('获取开庭案件列表失败: ' + (response.msg || '未知错误'))
      }
    } catch (error) {
      // 错误处理 - 忽略取消的请求
      if (error instanceof Error && !(error as any).code?.includes('CANCELED')) {
      }
    } finally {
      // 重置加载状态
      loading.value = false
    }
  }

  // 暴露方法供父组件调用（如果需要）
  defineExpose({
    loadCourtScheduleList,
  })

  // 判断开庭时间是否为今日或即将开庭
  const getTimeClass = (sessionTime: string): string => {
    const sessionDate = new Date(sessionTime)
    const today = new Date()
    const tomorrow = new Date(today)
    tomorrow.setDate(today.getDate() + 1)

    // 设置今天和明天的开始和结束时间
    const todayStart = new Date(today.getFullYear(), today.getMonth(), today.getDate())
    const tomorrowEnd = new Date(
      tomorrow.getFullYear(),
      tomorrow.getMonth(),
      tomorrow.getDate(),
      23,
      59,
      59
    )

    // 判断是否为今日开庭
    if (sessionDate >= todayStart && sessionDate < tomorrow) {
      return 'session-time-today'
    }
    // 判断是否为明日开庭
    else if (sessionDate >= tomorrow && sessionDate <= tomorrowEnd) {
      return 'session-time-soon'
    }

    return ''
  }

  // 处理更多按钮点击
  const handleMore = () => {
    ElMessage.info('跳转到案件列表页面')
    // 实际项目中应该跳转到案件列表页面
    // router.push('/lawcase/list');
  }

  // 组件挂载时加载数据
  onMounted(() => {
    loadCourtScheduleList()
  })
</script>

<style scoped lang="scss">
  .dashboard-court-schedule {
    // 完全移除高度限制，让组件自然适应内容
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid #f0f0f0;
    }

    .title {
      font-weight: 600;
      font-size: 16px;
      color: #303133;
    }

    .more-btn {
      color: #409eff;
      padding: 0;
      font-size: 14px;
      transition: color 0.3s;

      &:hover {
        color: #66b1ff;
        background-color: transparent;
      }
    }

    .court-schedule-content {
      // 移除高度限制和溢出设置
      padding: 0;
    }

    .schedule-list {
      // 移除高度限制和溢出设置
      border-radius: 0 0 8px 8px;
      overflow: hidden;
    }

    // 自定义表格样式
    :deep(.el-table) {
      // 移除高度限制
      border: none;
      border-radius: 0;

      .el-table__header {
        background: linear-gradient(135deg, #f5f7fa 0%, #e6eaf0 100%);
      }

      .el-table__body-wrapper {
        // 移除高度限制和溢出设置
        overflow: visible;
      }

      .el-table__inner-wrapper {
        border-radius: 0 0 8px 8px;
        overflow: hidden;
      }

      // 表头样式
      th {
        font-weight: 600;
        font-size: 13px;
        color: #303133;
        // 保持合适的单元格padding
        padding: 14px 12px;
        height: 48px;
        text-align: center;
        border-bottom: 1px solid #ebeef5;
        background-color: transparent !important;

        &.is-leaf {
          border-bottom: 1px solid #ebeef5;
        }
      }

      // 单元格样式
      td {
        font-size: 13px;
        color: #606266;
        // 保持合适的单元格padding
        padding: 12px;
        height: 48px;
        text-align: center;
        border-bottom: 1px solid #f5f7fa;
        transition: background-color 0.3s;
      }

      // 行hover效果
      .el-table__row {
        transition: all 0.3s;

        &:hover > td {
          background-color: #fafafa !important;
        }
      }

      // 斑马纹效果
      .el-table__row--striped td {
        background-color: #fcfcff;
      }

      // 即将开庭的案件高亮
      .session-time-soon {
        color: #e6a23c;
        font-weight: 500;
      }

      // 今日开庭的案件高亮
      .session-time-today {
        color: #f56c6c;
        font-weight: 600;
      }

      // 案件编号样式优化
      .case-code {
        color: #409eff;
        font-family: 'Courier New', Courier, monospace;
      }
    }

    // 空状态样式优化
    :deep(.el-empty) {
      padding: 40px 0;

      .el-empty__image {
        width: 80px;
        height: 80px;

        img {
          width: 80px;
          height: 80px;
        }
      }

      .el-empty__description {
        margin-top: 16px;
        color: #909399;
        font-size: 14px;
      }
    }
  }
</style>
